<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(f);

        function f(){
//            var $lis = $("div").children("p");
//            $lis.css("color","red");
//            $lis.click(function(){
//                console.log($(this).index());
//            });
            //children
            //next
            //prev
            //siblings
           // $("#l3").siblings().css("color","red");
            $("#s1").parents("li").css("color","red");
        }
    </script>
</head>
<body>
<!--
    <div>
        <h1>1</h1>
        <h2>2</h2>
        <h3>3</h3>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li id="l3">
            <p>
                <span id="s1">123</span>
                <span>456</span>
            </p>
            <p>
                <span id="s2">123</span>
                <span>456</span>
            </p>
        </li>
        <li>4</li>
        <li>5</li>
    </ul>

</body>
</html>